let data = [];
let showData = [];
let search = document.querySelector('.search');
const url = "https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json"
let suggestions = document.querySelector('.suggestions');

fetch(url)
    .then(function (res) {
        if (res.status == 200) {
            return res.json()
        }
    })
    .then(function (jsonData) {
        data = jsonData;
    })
    .catch(function () {
        console.log('cath error')
    });

function creatDom(data) {
    let listDom = ''
    if (data.length <= 0) {
        listDom = '<li><p class="poet">找求不到，换个词！</p></li>'
    } else {
        for (let i = 0; i < data.length; i++) {
            listDom += `<li>
        <p class="poet">${data[i].detail_text}</p>
        <p class="title">${data[i].title} - ${data[i].detail_author.join()}</p>
    </li>`
        }
    }
    suggestions.innerHTML = listDom

};

function dataFilter(element) {
    return element.detail_text.includes(this.value) || element.title.includes(this.value) || element.detail_author.join().includes(this.value)

};

search.addEventListener('input', function () {
    showData = data.filter(dataFilter, this);
    creatDom(showData);
});